<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="outer">
      <button id="btn">输入法</button>
      <ul id="ime">
        <li><a href="#">手写</a></li>
        <li><a href="#">拼音</a></li>
        <li id="close"><a href="#">关闭</a></li>
      </ul>
    </div>
  </body>
  <script>
    let bth = document.querySelector("#btn");
    let ime = document.querySelector("#ime");
    let close = document.querySelector("#close");
    let style = ime.style;
    bth.onclick = function () {
      style.display = style.display == "block" ? "none" : "block";
    };
    close.onclick = function () {
      style.display = "none";
    };
  </script>
  <style>
    body,
    ul,
    li,
    button {
      margin: 0;
      padding: 0;
    }
    body {
      font: 12px/1.5 Tahoma;
    }
    ul {
      list-style-type: none;
    }
    button {
      cursor: pointer;
    }
    #outer {
      width: 70px;
      margin: 10px auto;
    }
    #ime {
      margin-top: 5px;
      background: #fff;
      border: 1px solid #9a99ff;
      display: none;
    }
    #ime li {
      width: 100%;
      line-height: 24px;
      display: inline-block;
      vertical-align: top;
    }
    #close {
      border-top: 1px solid #9a99ff;
    }
    #ime li a {
      color: #00c;
      padding: 0 5px;
      display: block;
      text-decoration: none;
    }
    #ime li a:hover {
      background: #d9e1f6;
    }
  </style>
</html>
